<template>
    <div class="purchasestop1">
        <div class="list_box" v-for="item in orderList" :key="item.time + item.proid">
            <div class="head">
                <p><van-icon name="shop-o" color="#666" size="14" />嗨购商城官方旗舰店<van-icon name="arrow" size="14" color="#666" /></p>
                <p class="but" v-if="!item.isflag">等待付款</p>
                <p class="evenbut" v-else>已完成</p>
            </div>
            <div class="list_item">
                <!-- 产品图片 -->
                <img :src="item.img1" alt="">
                <!-- 产品信息----价格、标题、数量 -->
                <div class="listInfo">
                <!-- 产品标题 -->
                <div class="title van-multi-ellipsis--l2">{{ item.proname }}</div>
                <div class="info" v-if="!item.isflag">
                    <!-- 产品单价 -->
                    <span class="price"><i>应付:</i>￥{{ item.originprice | setPriceInt }}<i>.{{ item.originprice | setPriceFloat }}</i></span>
                    <span class="num">×{{ item.num }}</span>
                </div>
                <div class="newinfo" v-else>
                    <!-- 产品单价 -->
                    <span class="price"><i>已付:</i>￥{{ item.originprice | setPriceInt }}<i>.{{ item.originprice | setPriceFloat }}</i></span>
                    <span class="num">×{{ item.num }}</span>
                </div>
                <!-- 购物车商品操作 -->
                <p class="remove" v-if="!item.isflag"><button>去支付</button>支付剩余00小时43分</p>
                <p class="newremove" v-else><button>查看物流</button></p>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="stylus" scoped>
.purchasestop1
    height 100%
    background-color #f7f7f7
    padding .9375rem
    .list_box
        margin-top 1.25rem
        padding .625rem
        display flex
        flex-direction column
        background-color white
        border-radius .625rem
        .head
            display flex
            font-size .875rem
            justify-content space-between
            p
                display flex
                align-items center
            .but
                color red
            .evenbut
                color #000
    .list_item
        display flex
        align-items center
        height 7.5rem
        img
            width 6rem
            height 6rem
            margin 0 .625rem
            border-radius .625rem
    .listInfo
        display flex
        flex-direction column
        justify-content space-evenly
        height 100%
        flex 1
        .title
            font-size .875rem
            color #262626
        .info
            display flex
            justify-content space-between
            padding-right .625rem
            .price
                color red
                font-weight 600
                i
                    font-weight 400
                    font-size .75rem
                    font-style: normal
            .num
                font-size .75rem
                color #666
        .newinfo
            display flex
            justify-content space-between
            padding-right .625rem
            .price
                color red
                font-weight 600
                i
                    font-weight 400
                    font-size .75rem
                    font-style: normal
            .num
                font-size .75rem
                color #666
    .remove
        font-size .75rem
        color red
        display flex
        flex-direction row-reverse
        align-items center
        button
            color white
            padding .3125rem .9375rem
            background-color red
            border-radius 62.4375rem
            border 0
            margin-left .3125rem
    .newremove
        font-size .75rem
        color red
        display flex
        flex-direction row-reverse
        align-items center
        button
            color white
            padding .3125rem .9375rem
            background-color #000
            border-radius 62.4375rem
            border 0
            margin-left .3125rem
</style>
<script>
import Vue from 'vue'
import { getConFirmOrder } from '@/api/purchase'
import { Icon } from 'vant'
Vue.use(Icon)
export default {
  data () {
    return {
      // 用户id
      userid: '',
      // 待付款的商品列表
      orderList: []
    }
  },
  mounted () {
    this.userid = this.$store.state.userId
    let newarr = this.$store.state.orderState ? this.$store.state.orderState : []
    // 获取当前用户id待付款的商品列表
    newarr = newarr.filter((item) => {
      if (item.userid === this.userid) {
        return item
      }
      return false
    })
    newarr.forEach((item) => {
      getConFirmOrder({ params: { userid: item.userid, time: item.key } }).then((res) => {
        const data = res.data
        data.map(value => {
          value.isflag = item.isflag
          return value
        })
        this.orderList = [...this.orderList, ...data]
      })
    })
  },
  filters: {
    // 获取总价整数部分
    setPriceInt (val) {
      if (val) {
        return parseInt(val)
      }
    },
    // 获取总价小数部分
    setPriceFloat (val) {
      if (val) {
        return val * 100 % 100 >= 10 ? val * 100 % 100 : '0' + val * 100 % 100
      }
    }
  }
}
</script>
